<template>
  <div class="search-content">
    <div
      class="search-box"
      :style="{ background: backColor ? '' : '#fff', boxShadow: backColor ? '' : '0 4px 10px 0 rgba(220, 223, 230, 0.5)' }"
    >
      <div class="l-search" v-if="way">
        <slot name="yyxbread"></slot>
        <span v-if="!$slots.yyxbread">{{ searchKey }}</span>
      </div>
      <div class="l-search" v-else>
        <el-icon>
          <Location />
        </el-icon>
        <div class="fx">
          <span style="margin-right: 5px">当前位置：</span>
          <span style="margin-right: 10px">首页</span>/<span style="margin-right: 10px" class="bk">
            {{ cateName }}
            <!-- 类目 -->
          </span>
        </div>
        <div class="fx">
          共 <span class="bk uderline" style="margin: 0 10px"> {{ pageList.total }}</span> 个结果
          <span class="bk uderline" style="margin: 0 10px">{{ pageList.current }}/{{ pageList.pages }}</span
          >页面
        </div>
      </div>
      <div style="display: flex; padding-right: 20px; z-index: 999">
        <div class="r-search">
          <div class="r-box">
            <div class="came" @click="toggoleImgSearch">
              <img src="../imgs/camera.png" alt="" />
            </div>
            <div class="line"></div>
            <el-select-v2
              v-model="searchKeyWord"
              :options="options"
              @keyup.enter="handelSearch"
              :filter-method="value => dataFilter(value, 'hello')"
              placeholder="请输入商品名、品牌名、3级分类名搜索商品"
              style="width: 388px; vertical-align: middle"
              filterable
            >
              <template #default="{ item }">
                <span style="margin-right: 8px">{{ item.label }}</span>
              </template>
            </el-select-v2>
            <div class="search-icon" @click.stop="searchAdd">
              <img src="../imgs/search-icon.png" alt="" />
            </div>
          </div>
          <imgSearch v-show="isShowImgSearch" @close="closeImgSearch" />
        </div>
        <div class="collection" @click="$router.push({ path: '/manage/collection' })">
          <img src="../imgs/collect.png" alt="" style="width: 100%; height: 100%" />
        </div>
      </div>
      <slot></slot>
    </div>
  </div>
</template>
<script>
import shopSelectStore from "@/store/modules/shopSelect";
import { toRaw } from "vue";
import _ from "lodash";
import imgSearch from "./imgSearch.vue";
import { watch } from "less";
import { getWelcome } from "@/apis/shopHome/home";
export default {
  name: "search",
  components: { imgSearch },
  props: {
    way: {
      type: Boolean,
      default: true
    },
    pageList: {
      type: Object,
      default: () => {
        return {
          total: 1,
          current: 1,
          pages: 1
        };
      }
    },
    backColor: {
      type: Boolean,
      default() {
        return false;
      }
    }
  },
  data() {
    return {
      options: [],
      searchKeyWord: "",
      cateName: "",
      isShowImgSearch: false,
      searchKey: "你好！欢迎来到专业设计师选购商城~"
    };
  },
  watch: {
    $route: {
      handler: function (to, from) {
        // 路由变化时的处理逻辑
        this.searchKeyWord = this.$route.query.value;
        this.cateName = toRaw(shopSelectStore().getShopSelect()).name;
        console.log("路由变化了", this.cateName);
      },
      // 设置为深度监听
      deep: true,
      immediate: true
    }
  },
  async mounted() {
    const res = await getWelcome();
    this.searchKey = res.data.length > 0 ? res.data[0].content : "你好！欢迎来到专业设计师选购商城~";
    // this.searchKeyWord = this.$route.query.value;
    // this.cateName = toRaw(shopSelectStore().getShopSelect()).name;
  },
  computed: {},
  methods: {
    closeImgSearch() {
      this.isShowImgSearch = false;
    },
    toggoleImgSearch() {
      this.isShowImgSearch = !this.isShowImgSearch;
    },
    searchAdd() {
      // let searchKeyWord = "";
      if (this.searchKeyWord) {
        this.options.push({
          value: `${this.searchKeyWord}`,
          label: `${this.searchKeyWord}`
        });
        this.options.length > 10 && this.options.unshift(1);
        this.options = [...new Set(this.options)];
        // searchKeyWord = this.searchKeyWord;
      }
      // if (this.$route.name !== "shopCategories") {
      return this.$router.push({
        path: "/search/searchkey",
        query: {
          value: this.searchKeyWord,
          searchType: 1 //文字搜索-1  图片搜索-2
        }
      });
      // }
    },
    handelSearch: _.debounce(function () {
      this.$emit("handSearch");
      this.searchAdd();
    }, 500),
    dataFilter(val, key) {
      this.searchKeyWord = val;
    },
    getRemoteData(query) {
      this.remoteSearchQuery = query;
    }
  }
};
</script>
<style lang="scss" scoped>
@use "@/assets/styles/mixin";
:deep(.el-select__suffix) {
  display: none !important;
}
.fx {
  @include mixin.flex-center;
  color: #86909c;
}

.bk {
  color: black !important;
}

.uderline {
  // text-decoration: underline;
}

:deep(.el-select__wrapper) {
  padding-left: 60px;
  box-shadow: none;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
  border-radius: 16px;
  background-color: transparent;
}

:deep(.el-select__wrapper.is-hovering:not(.is-focused)) {
  box-shadow: none;
}

.search-box {
  @include mixin.flex-between;
  position: fixed;
  width: max(1440px, 100%);
  padding-top: 20px;
  z-index: 22;
  padding-bottom: 12px;
  top: 50px;
  border-top: 1px solid #f2f3f5 !important;
  // background: white;?

  .l-search {
    @include mixin.flex-align;
    font-weight: 700;
    font-size: 14px;
    padding-left: 20px;
    color: #4e5969;

    span {
      margin-left: 5px;
      font-weight: 400;
      font-size: 14px;
      color: #86909c;
      line-height: 22px;
    }
  }

  .r-search {
    @include mixin.flex-center;
    position: relative;
    width: 388px;
    height: 32px;
    background-color: #eef1f4;
    border-radius: 16px;

    .r-box {
      @include mixin.flex-center;

      .came {
        position: absolute;
        left: 17px;
        z-index: 888;
        width: 16px;
        height: 16px;
        cursor: pointer;

        img {
          cursor: pointer;
          width: 100%;
          height: 100%;
        }
      }

      .search-icon {
        position: absolute;
        right: 14px;
        top: 7px;
        width: 15px;
        height: 15px;
        z-index: 1;
        cursor: pointer;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .line {
        position: absolute;
        height: 70%;
        width: 1px;
        left: 48px;
        opacity: 0.4;
        z-index: 888;
        background-color: #86909c;
      }
    }
  }

  .collection {
    width: 32px;
    height: 32px;
    margin-left: 10px;
    background-color: #eef1f4;
    cursor: pointer;
    border-radius: 17px;
  }
}
</style>
